<template>
  <view class="fu-rate">
    <view 
      v-for="(item, index) in max" 
      :key="index"
      class="fu-rate__item"
      @click="handleClick(index)"
      @touchmove.stop.prevent="handleTouchMove($event, index)"
    >
      <text 
        class="fu-rate__icon"
        :class="[
          iconName,
          {
            'fu-rate__icon--active': isActive(index),
            'fu-rate__icon--disabled': disabled
          }
        ]"
        :style="[
          iconStyle,
          isActive(index) ? activeStyle : null
        ]"
      >★</text>
    </view>
  </view>
</template>

<script>
/**
 * fu-rate 评分组件
 * @description 评分组件，支持手势滑动
 * @property {Number} modelValue - 当前分值
 * @property {Number} max - 最大分值
 * @property {String} iconName - 图标类名
 * @property {String} color - 未选中的颜色
 * @property {String} activeColor - 选中的颜色
 * @property {Number} size - 图标大小
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} allowHalf - 是否允许半星
 * @event {Function} update:modelValue - 分值变化时触发
 * @event {Function} change - 分值变化时触发
 */
export default {
  name: 'fu-rate',
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 5
    },
    iconName: {
      type: String,
      default: 'fu-icon-star'
    },
    color: {
      type: String,
      default: '#c8c9cc'
    },
    activeColor: {
      type: String,
      default: '#ffd21e'
    },
    size: {
      type: Number,
      default: 40
    },
    disabled: {
      type: Boolean,
      default: false
    },
    allowHalf: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    iconStyle() {
      return {
        fontSize: `${this.size}rpx`,
        color: this.color
      }
    },
    activeStyle() {
      return {
        color: this.activeColor
      }
    }
  },
  methods: {
    isActive(index) {
      const value = this.modelValue
      if (this.allowHalf) {
        return value > index || (value === index + 0.5)
      }
      return value > index
    },
    handleClick(index) {
      if (this.disabled) return
      let value = index + 1
      if (this.allowHalf && this.getHalfStatus(index)) {
        value -= 0.5
      }
      this.updateValue(value)
    },
    handleTouchMove(event, index) {
      if (this.disabled) return
      const touch = event.touches[0]
      const rect = event.currentTarget.getBoundingClientRect()
      const halfWidth = rect.width / 2
      
      // 判断触摸点是否在当前星星的左半部分
      const isHalf = this.allowHalf && (touch.clientX - rect.left < halfWidth)
      const value = isHalf ? index + 0.5 : index + 1
      
      this.updateValue(value)
    },
    getHalfStatus(index) {
      if (!this.allowHalf) return false
      const rect = document.elementFromPoint(event.clientX, event.clientY).getBoundingClientRect()
      const halfWidth = rect.width / 2
      return event.clientX - rect.left < halfWidth
    },
    updateValue(value) {
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-rate {
  display: inline-flex;
  align-items: center;
  
  &__item {
    position: relative;
    padding: 0 4rpx;
    cursor: pointer;
  }
  
  &__icon {
    transition: color 0.2s;
    
    &--active {
      transform: scale(1.1);
    }
    
    &--disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}
</style> 